<template>
	<div class="hot">


		<div class="list">
			<h2 style="font-size: 14px;font-weight: 300;background-color: ghostwhite;height: 40px;"><span style="color: orangered;font-size: 20px;">Top
					10</span><span style="color: white;">nio</span>热门文章</h2>
			<ul>
				<li v-for="(item,index) in res" :key="item.id">

					<router-link to="">
						<span :class="{orange:index<3}">{{index+1}}</span>
						<span style="color: gray;font-size: 14px;position: relative;left: 20px;border-bottom: 0.5px solid gainsboro;">{{item.title}}</span>

					</router-link>

				</li>
				
		</ul>
		</div>
	</div>
</template>

<script>
	//模拟数据
	let resData = [{
			"id": "1",
			"title": "PHP学科"
		},
		{
			"id": "2",
			"title": "这是第一篇文章"
		},
		{
			"id": "3",
			"title": "Vuecl学科"
		},
		{
			"id": "4",
			"title": "少走些弯路,就看看这个帖"
		},
		{
			"id": "5",
			"title": "PHP学科:MySQL手册"
		}, {
			"id": "6",
			"title": "微信公众平台开发"
		},
		{
			"id": "7",
			"title": "PHP进阶新课堂开课啦"
		}

	]
	export default {
		data() {
			return {
				res: resData
			}
		}
	}
</script>

<style scoped>
	.hot {
		background: #fff;
		height: 390px;
	}

	ul {
		padding: 0;
		list-style: none;
	}

	a {
		text-decoration: none;
		color: gray;
position: relative;
left: 20px;

	}

	.orange {
		color: orange;
	}
	li{
		padding: 12px 0;
	}
	
</style>
